<template>
	<view>
		<view class="edgeInsetTop"></view>
		<form @submit="formSubmit">
			<view class="cu-list menu solid-bottom">
				<view class="cu-item arrow" style="min-height:150rpx;" @tap="Avatar">
					<view class="content">
						<text style="font-size: 30rpx;">{{$t('userSetting-input-avatarTitle')}}</text>
					</view>
					<view class="action">
						<view class="cu-avatar round lg"
							:style="{backgroundImage: 'url('+ $wanlshop.oss(user.avatar, 52, 52, 2, 'avatar') +')'}">
						</view>
					</view>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">{{$t('userSetting-input-nickTitle')}}</view>
				<input :placeholder="$t('userSetting-input-nickPlaceholder')" name="nickname"
					:value="user.nickname"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">{{$t('userSetting-input-nameTitle')}}</view>
				<input :placeholder="$t('userSetting-input-namePlaceholder')" name="username"
					:value="user.username"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">{{$t('userSetting-input-bioTitle')}}</view>
				<input :placeholder="$t('userSetting-input-bioPlaceholder')" name="bio" :value="user.bio"></input>
			</view>
			<!-- <view class="cu-form-group">
				<view class="title">性别</view>
				<view style="display: none;">
					<input name="gender" :value="genderdata" disabled></input>
				</view>
				<switch class='switch-sex' @change="Gender" :class="gender?'checked':''" :checked="gender?true:false"></switch>
			</view>
			<view class="cu-form-group">
				<view class="title">日期选择</view>
				<picker mode="date" :value="user.birthday || '1992-08-23'" @change="DateChange">
					<view style="display: none;">
						<input name="birthday" :value="user.birthday" disabled></input>
					</view>
					<view class="picker">
						{{user.birthday || '1992-08-23'}}
					</view>
				</picker>
			</view> -->
			<view class="padding-bj flex flex-direction">
				<button form-type="submit"
					class="cu-btn wanl-bg-redorange margin-tb lg">{{$t('userSetting-but-save')}}</button>
				<button class="cu-btn line-red lg" @tap="logout()">{{$t('userSetting-but-exit')}}</button>
			</view>
		</form>

	</view>
</template>

<script>
	import graceChecker from '@/common/graceChecker';
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['user'])
		},
		data() {
			return {
				gender: true,
				genderdata: 0
			}
		},
		onLoad() {
			//中央总线重新赋值Data
			this.gender = this.$store.state.user.gender == 0 ? true : false;
			this.genderdata = this.$store.state.user.gender;
		},
		methods: {
			logout() {
				this.$store.dispatch('user/logout');
				this.$wanlshop.msg(this.$t('refundLists-toast-exit'));
				// this.$wanlshop.back(1);

			},
			DateChange(e) {
				this.$store.state.user.birthday = e.detail.value
			},
			Gender(e) {
				if (e.detail.value == true) {
					this.gender = true;
					this.genderdata = 0;
				} else {
					this.gender = false;
					this.genderdata = 1;
				}
			},
			Avatar() {
				this.$wanlshop.to('/pages/user/portrait/portrait');
			},
			formSubmit: function(e) {
				//定义表单规则

				let rule = [{
						name: 'username',
						checkType: 'string',
						checkRule: '3,32',
						errorMsg: this.$t('userSetting-inputRule-username')
					},
					{
						name: 'nickname',
						checkType: 'string',
						checkRule: '3,32',
						errorMsg: this.$t('userSetting-inputRule-nickname')
					}
				];
				//进行表单检查
				let formData = e.detail.value;
				let checkRes = graceChecker.check(formData, rule);
				// ..检查是否注册-没注册跳转注册
				if (checkRes) {
					uni.request({
						url: '/wanlshop/user/profile',
						method: 'POST',
						data: formData,
						success: res => {
							// 保存用户信息
							this.$store.commit('user/setUserInfo', formData);
							// 提示
							this.$wanlshop.msg(this.$t("refundLists-toast-save"));
						}
					});
				} else {
					this.$wanlshop.msg(graceChecker.error);
				}
			}
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
</style>